<template>
  <div>
    <div class="work-setting-panel">
      <a-row>
        <template v-for="(work, index) in formData.contentList">
          <!-- 1-图文 5-视频 6-语音 4-文档 -->
          <template v-if="work.type == '1'">
            <vy-cmp-work-content-editor
              :key="index"
              :index="index"
              :title="fmt_view_content_title(index, work.type)"
              :source="work"
              @del_work_content="click_del_work_content"
            ></vy-cmp-work-content-editor>
          </template>
          <template v-if="work.type == '5'">
            <vy-cmp-work-content-video
              :key="index"
              :index="index"
              :title="fmt_view_content_title(index, work.type)"
              :source="work"
              @del_work_content="click_del_work_content"
            ></vy-cmp-work-content-video>
          </template>
          <template v-if="work.type == '6'">
            <vy-cmp-work-content-audio
              :key="index"
              :index="index"
              :title="fmt_view_content_title(index, work.type)"
              :source="work"
              @del_work_content="click_del_work_content"
            ></vy-cmp-work-content-audio>
          </template>
          <template v-if="work.type == '4'">
            <vy-cmp-work-content-doc
              :key="index"
              :index="index"
              :title="fmt_view_content_title(index, work.type)"
              :source="work"
              @del_work_content="click_del_work_content"
            ></vy-cmp-work-content-doc>
          </template>
        </template>
        <div class="vy-plus-panel">
          <template v-if="plusEnableClick">
            <div class="vy-plus-btn" @click="() => (optionShow = !optionShow)">
              <img
                src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                style="width:40px;"
              />
            </div>
          </template>
          <template v-else>
            <div class="vy-plus-btn" style="cursor: unset;">
              <img
                src="https://image.xuexiwangzhe.com/FrwsguOhE-FNCjTmg8ue4_SWYouM"
                style="width:40px;cursor: unset;"
              />
            </div>
          </template>
        </div>
        <div class="vy-plus-wrapper">
          <div class="vy-plus-options" v-show="optionShow">
            <div class="vy-plus-options-panel">
              <!-- <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('2')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/FpU24D4AlI3axkc-Ws13CY_QJZtP"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">图片</div>
                  </div> -->
              <div
                class="vy-plus-options-item"
                @click="click_add_work_content('1')"
              >
                <div class="vy-plus-options-item-icon">
                  <img
                    src="https://image.xuexiwangzhe.com/Fsp01ui0Fph_KGnGLx38lFuQMNL7"
                    style="width:20px;"
                  />
                </div>
                <div class="vy-plus-options-item-desc">图文</div>
              </div>
              <div
                class="vy-plus-options-item"
                @click="click_add_work_content('5')"
              >
                <div class="vy-plus-options-item-icon">
                  <img
                    src="https://image.xuexiwangzhe.com/FvmMjbGcsH34JbTlcAitfk3KgFn1"
                    style="width:20px;"
                  />
                </div>
                <div class="vy-plus-options-item-desc">视频</div>
              </div>
              <div
                class="vy-plus-options-item"
                @click="click_add_work_content('6')"
              >
                <div class="vy-plus-options-item-icon">
                  <img
                    src="https://image.xuexiwangzhe.com/FqIz9mRtYmLslpNIOka-8Re83VTp"
                    style="width:15px;"
                  />
                </div>
                <div class="vy-plus-options-item-desc">语音</div>
              </div>
              <div
                class="vy-plus-options-item"
                @click="click_add_work_content('4')"
              >
                <div class="vy-plus-options-item-icon">
                  <img
                    src="https://image.xuexiwangzhe.com/Fh2CQq2OSjjJhcuBOwvbJR4cRRM5"
                    style="width:20px;"
                  />
                </div>
                <div class="vy-plus-options-item-desc">文档</div>
              </div>
              <!-- <div
                    class="vy-plus-options-item"
                    @click="click_add_work_content('6')"
                  >
                    <div class="vy-plus-options-item-icon">
                      <img
                        src="https://image.xuexiwangzhe.com/Fg86jSy8s0UcO03KtjbdDv2SwdJ1"
                        style="width:20px;"
                      />
                    </div>
                    <div class="vy-plus-options-item-desc">H5</div>
                  </div> -->
            </div>
          </div>
        </div>
      </a-row>
    </div>
    <a-form>
      <a-form-item class="vy-form-footer">
        <a-button
          type="primary"
          :disabled="!formData.contentList.length"
          @click="click_save_info"
          >保存更改</a-button
        >
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import WorkEditor from "./work/editor.vue"; // 图文
import WorkAudio from "./work/audio.vue"; // 音频
import WorkVideo from "./work/video.vue"; // 视频
import WorkWord from "./work/doc.vue"; // 文档
// 作业内容类型关系 1-图文  5-视频 6-语音 4-文档
const work_content_TYPE = {
  "2": "图片",
  "1": "图文",
  "5": "视频",
  "6": "语音",
  "4": "文档",
  // "6": "H5",
};
const work_content_FIELD = {
  id: +new Date() + 1000, // 资源Id
  fileName: "", // 文件名
  savePath: "", // 保存地址
  content: "", // 富文本内容
  type: 1, // 1-图文  5-视频 6-语音 4-文档
};
const CMP_TYPE = 7; // 组件类型
export default {
  name: "vy-cmp-content",
  data() {
    return {
      plusEnableClick: false, // 添加按钮可以点击
      optionShow: true, // 添加选项是否显示
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        contentList: [],
        resources: [],
      },
    };
  },
  components: {
    [WorkEditor.name]: WorkEditor,
    [WorkAudio.name]: WorkAudio,
    [WorkVideo.name]: WorkVideo,
    [WorkWord.name]: WorkWord,
  },
  watch: {
    "formData.resources": {
      handler: function(newVal, oldVal) {
        let resultList = [];
        this.formData.contentList = [];
        newVal.forEach((item) => {
          let result = {};
          Object.assign(result, work_content_FIELD, item);
          resultList.push(result);
        });

        this.formData.contentList = resultList;
      },
      deep: true,
    },
  },
  mounted() {
    const params = {
      moduleType: CMP_TYPE,
      projectId: this.projectId,
      moduleId: this.getModuleId(), // 主题Id
      id: this.formData.id || "",
    };
    this.$axios.get("/subassembly/getModuleRule", { params }).then((res) => {
      if (res.success) {
        this.$emit("card-rule-value", res.subassemblyVo.showContent);
      }
    });
  },
  methods: {
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    fmt_view_content_title(index, type) {
      return work_content_TYPE[type];
    },
    click_del_work_content(index) {
      this.formData.contentList.splice(index, 1);
    },
    click_add_work_content(type) {
      this.add_work_content(type);
    },
    add_work_content(type) {
      let _work = JSON.parse(JSON.stringify(work_content_FIELD));
      Object.assign(_work, {
        type: type, // 内容类型
      });
      this.formData.contentList.push(_work);
    },
    // 创建/更新内容组件
    saveInfo() {
      let submitData = {
        resources: this.formData.contentList,
      };

      let params = Object.assign({}, this.formData, submitData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId(), // 主题Id
      });
      this.$axios.post("/subassembly/save", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    },
  },
};
</script>
<style type="text/css" lang="scss">
.work-setting-panel {
  padding-bottom: 30px;
  .ant-row {
    padding: 5px 0px;
  }
  .ck-editor__editable {
    height: 230px;
  }

  .vy-sign,
  .vy-title {
    display: inline-block;
    vertical-align: middle;
  }
  .vy-sign {
    background: #3366ff;
    border-radius: 1px;
    font-weight: 400;
    color: #3366ff;
    margin-right: 15px;
    width: 5px;
    height: 20px;
  }
}
// 作业类型区域添加
.vy-plus-panel {
  position: relative;
  &::before {
    content: " ";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    border-top: 3px solid #eef4ff;
  }
  .vy-plus-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 0 20px;
    z-index: 10;
    cursor: pointer; // 若是可点击显示隐藏添加作业类型选项，可设置该值
    .anticon-plus {
      padding: 5px;
      background: #494949;
      border-radius: 50%;
      color: #ffffff;
    }
  }
}
.vy-plus-wrapper {
  position: relative;
  // border: 1px solid red;
  width: fit-content;
  margin: 0 auto;
  .vy-plus-options {
    margin: 0 auto;
    padding-top: 32px;
    position: relative;
    &::before {
      position: absolute;
      content: " ";
      border: 10px solid #eef4ff;
      border-color: #fff #fff #eef4ff #fff;
      top: 12px;
      left: calc(50% - 10px);
    }
    .vy-plus-options-panel {
      display: flex;
      padding: 0 20px;
      border-radius: 8px;
      color: #3366ff;
      background: #eef4ff;
      box-shadow: 0px 2px 8px 0px rgba(181, 200, 255, 0.63);
      justify-content: space-between;
      align-items: center;
      .vy-plus-options-item {
        line-height: initial;
        position: relative;
        text-align: center;
        cursor: pointer;
        padding: 10px 15px;
        .vy-plus-options-item-desc {
          padding-top: 6px;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
  }
}

.vy-form-footer {
  margin-top: 50px;
  text-align: center;
  margin-bottom: 0;
  .ant-btn {
    padding: 0 100px;
    &.ant-btn-primary {
      background: rgba(51, 102, 255, 1);
      &:hover {
        background: rgba(51, 102, 255, 0.8);
      }
      &[disabled] {
        background: #f5f5f5;
        &:hover {
          background: #f5f5f5;
        }
      }
    }
  }
}
</style>
